<template>
  <div class="dt-select" ref="selectHeader">
    <div class="dt-select-header" @click="focus">
      <el-tooltip :open-delay="500" class="item" effect="dark" :content="getRealName(selectedUserIds[0]).realName" placement="top"
        v-if="selectedUserIds[0]">
        <em class="dt-select-name">{{ getRealName(selectedUserIds[0]).realName.substr(-2) }}<i class="el-icon-close" @click="choose('')"
            v-if="!readonly && !required"></i></em>
      </el-tooltip>
      <em :class="{ 'dt-select-img': true, 'is-disabled': readonly }" v-else></em>
    </div>
    <transition :name="isTop ? 'el-zoom-in-bottom' : 'el-zoom-in-top'">
      <div :class="['el-select-dropdown', 'el-popper', { 'is-top': isTop }]" :x-placement="isTop ? 'top-start' : 'bottom-start'" v-show="isFocus"
        :style="{ left: boxLeft }">
        <div class="el-scrollbar">
          <div class="dt-select-tab">
            <!--项目成员-->
            <el-tabs v-model="activeName">
              <el-tab-pane label="项目成员" name="0">
                <el-input placeholder="请输入成员实名、手机号" v-model.trim="searchPro" size="mini">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
                </el-input>
                <div class="dt-select-list">
                  <ul>
                    <template v-for="item in projectUserList">
                      <li :key="item.userId" v-if="item.isShow">
                        <span @click="choose(item.userId)"><em :title="item.realName">{{ item.realName }}</em><em>{{ item.safePhone || '--' }}</em><em
                            :title="item.speciality">{{ item.speciality | filterSpec }}</em></span>
                      </li>
                    </template>
                  </ul>
                  <div class="dt-select-null" v-if="isProNull">
                    <span>暂无数据</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="el-scrollbar__bar is-horizontal">
            <div class="el-scrollbar__thumb" style="transform: translateX(0%)"></div>
          </div>
          <div class="el-scrollbar__bar is-vertical">
            <div class="el-scrollbar__thumb" style="transform: translateY(0%)"></div>
          </div>
        </div>
        <div x-arrow="" class="popper__arrow" :style="{ left: iconLeft }"></div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: ['readonly', 'required', 'option'],
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      isFocus: false,
      activeName: '0',
      /*****prop*******/

      //项目人员列表
      projectUserList: [],
      selectedUserIds: [],
      /****prop********/
      searchPro: ''
    }
  },
  filters: {
    filterSpec(val) {
      var str = ''
      if (val) {
        if (val.length > 15) {
          str = val.substring(0, 10) + '...' + val.substr(-5)
        } else {
          str = val
        }
      }
      return str
    }
  },
  computed: {
    isTop() {
      return this.option.isTop
    },
    boxLeft() {
      return this.option.boxLeft
    },
    iconLeft() {
      return this.option.iconLeft
    },
    isProNull() {
      return this.projectUserList.every((item) => {
        return item.isShow === false
      })
    }
  },
  methods: {
    // resetSelectUser() {
    //   this.projectUserList = this.option.projectUserList.map((item) => {
    //     item.isShow = true
    //     return item
    //   })
    //   this.selectedUserIds = this.option.selectedUserList.map((item) => {
    //     return item.userId
    //   })
    // },
    getRealName(userId) {
      return this.projectUserList.filter((item) => {
        return item.userId === userId
      })[0]
    },
    focus() {
      if (!this.readonly) {
        this.isFocus = true
      }
    },
    choose(userId) {
      //单选
      this.isFocus = false
      this.selectedUserIds.splice(0, 1, userId)
      this.$emit('select', '' + userId)

      //选完重置一下
      this.retset()
    },
    search() {
      //项目 本地筛选
      this.projectUserList = this.projectUserList.map((item) => {
        if ((item.realName && item.realName.indexOf(this.searchPro)) > -1 || (item.safePhone && item.safePhone.indexOf(this.searchPro) > -1)) {
          item.isShow = true
        } else {
          item.isShow = false
        }
        return item
      })

      // this.$emit('select', this.selectedUserIds.join())
    },
    retset() {
      this.isFocus = false
      this.searchPro = ''
      this.projectUserList = this.projectUserList.map((item) => {
        item.isShow = true
        return item
      })
    }
  },
  watch: {
    //监听option重新赋值变化
    option: {
      handler(newVal, oldVal) {
        this.projectUserList = newVal.projectUserList.map((item) => {
          item.isShow = true
          return item
        })
        this.selectedUserIds = newVal.selectedUserList.map((item) => {
          return item.userId
        })
      },
      deep: true, //深度监听
      immediate: true
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      if (this.isFocus && this.$refs.selectHeader && !this.$refs.selectHeader.contains(e.target)) {
        this.retset()
      }
    })
  }
}
</script>
<style scoped>
.dt-select {
  position: relative;
  display: inline-block;
}
.dt-select .dt-select-header {
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.dt-select .dt-select-header .dt-select-img {
  width: 36px;
  height: 36px;
  display: block;
  background-image: url(/skb/img/card/bu-xzry36-normal.png);
}
.dt-select .dt-select-header .dt-select-img:hover {
  background-image: url(/skb/img/card/bu-xzry36-hover.png);
}

.dt-select .dt-select-header .dt-select-img.is-disabled,
.dt-select .dt-select-header .dt-select-img.is-disabled:hover {
  background-image: url(/skb/img/card/bu-xzry36-normal.png);
  cursor: default;
}
.dt-select .dt-select-header .dt-select-name {
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background-color: #0077ff;
  color: #fff;
  display: block;
  border-radius: 50%;
  position: relative;
}
.dt-select .dt-select-header .el-icon-close {
  position: absolute;
  right: -3px;
  top: -3px;
  cursor: pointer;
  color: #fff;
  background-color: #c0c4cc;
  border-radius: 50%;
  display: none;
}
.dt-select .dt-select-header:hover .el-icon-close {
  display: block;
}

.dt-select .el-scrollbar {
  padding: 0 20px 6px;
}

.dt-select .el-popper[x-placement^='bottom'] .popper__arrow,
.dt-select .el-popper[x-placement^='top'] .popper__arrow {
  left: 16px;
}
.dt-select .el-select-dropdown {
  width: 560px;
  left: -5px;
}
.dt-select .el-select-dropdown.is-top {
  bottom: 35px;
}
.dt-select >>> .el-input__icon {
  cursor: pointer;
}
.dt-select >>> .el-input__icon:hover {
  color: #5976ef;
}
.dt-select-list {
  margin-top: 8px;
  height: 260px;
  overflow: auto;
}
.dt-select-list li {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  display: flex;
  padding: 0 8px;
  border-bottom: 1px solid #e9eef7;
  font-size: 12px;
}
.dt-select-list li:hover {
  background-color: #f0f5ff;
}
.dt-select-list li .el-checkbox {
  margin-right: 8px;
}
.dt-select-list li span {
  flex: 1;
  display: flex;
}
.dt-select-list li span em:nth-child(1),
.dt-select-list li span em:nth-child(2) {
  width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dt-select-list li span em:nth-child(3) {
  flex: 1;
  text-align: right;
}
.dt-select-tab >>> .el-input--mini .el-input__inner {
  border-color: #dcdfe6 !important;
}
.dt-select-null {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>
